<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 编码 -->
    <meta charset="UTF-8">
    <!-- 关键词 -->
    <meta name="Keywords" content="canvas">
    <!-- 描述 -->
    <meta name="Description" content="3D城市">
    <title>3D城市</title>
    <style>
        * {
            margin: 0;
        }

        html,body {
            width: 100%;
            height: 100%;
            perspective: 700px; /*景深  观察的距离*/
        }

        div,b,i {
            position: absolute;
            transform-style: preserve-3d; /*3D*/
        }

        /*
        居中
        绝对定位
         */
        #City3D {
            background: black;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border: 10px solid #3ec3ca; /* 边框  实线 */
            transform: rotateX(60deg) rotateZ(-140deg);
        }

        #City3D div b {
            height: 100%;
            /*background: red;*/
            background: rgba(176,208,223,0.9);
            transform: rotateX(90deg); /*绕X轴旋转*/
            transform-origin: 0 0; /*旋转中心*/
        }

        #City3D div b > b{
            /*background: dodgerblue;*/
            background: rgba(176,208,223,0.9);
            transform: rotateY(90deg);
            transform-origin: 0 0;
        }

        #City3D div b > b > b{
            /*background: chartreuse;*/
            background: rgba(176,208,223,0.9);
            transform: rotateY(90deg);
            transform-origin: 100% 0;
            right: 0;
        }

        #City3D div b > b > b > b{
            /*background: orange;*/
            background: rgba(176,208,223,0.9);
            transform: rotateY(90deg);
            transform-origin: 0 100%;
            left: 0;
        }

        #City3D div b > b > b > b > i{
            /*background: yellow;*/
            background: rgba(176,208,223,0.9);
            transform: rotateX(-90deg);
            transform-origin: 0 100%;
            bottom: 1px;
        }

        #City3D div.a b{
            background-image: url("image/1.jpg");
        }

        #City3D {
            background-image: url("image/2.jpg");
        }
    </style>
</head>
<body>
    <script src="js/city.js"></script>
    <!--<div id="City3D">
        &lt;!&ndash; 楼 &ndash;&gt;
        <div class="a" style="height: 150px; top: 0;left: 0">
            &lt;!&ndash;墙&ndash;&gt;
            <b style="width: 30px;">
                <b style="width: 20px;">
                    <b style="width: 30px;">
                        <b style="width: 20px;">
                            <i style="width: 20px; height: 30px"></i>
                        </b>

                    </b>
                </b>
            </b>
        </div>
    </div>-->

</body>
</html>